<template>
  <div class="kill-box">
    <div class="time-box">
        <span class="top">嗨购秒杀</span>
        <span class="red">&nbsp;&nbsp;8点场&nbsp;&nbsp;</span>
        <span class="big">
            <span class="box">{{day}}</span>:<span class="box">{{shi}}</span>:<span class="box">{{fen}}</span>:<span class="box">{{miao}}</span>
        </span>
        <span class="hot">爆款轮番炒→</span>
    </div>
    <br>
    <div class="bottom-box">
        <ul>
            <li v-for="goods in goodlist" :key="goods.id">
               <img :src="goods.img">
               <p class="price">￥{{goods.price}}</p>
            </li>
        </ul>
    </div>
  </div>
</template>

<script>
// import axios from "axios";

export default {
  name:"SecondsKillVue",
  data() {
        return {
            // count: '', //倒计时
            // seconds: 864000 // 10天的秒数
            day:"",
            shi:"",
            fen:"",
            miao:"",
            goodlist:[]
        }
    },
    mounted() {
        this.Time() //调用定时器
    },
    created(){
      this.$server({
        url:"goods"
      })
      .then(res=>{
      this.goodlist=res.data;
      })
    },
    methods: {
        // 天 时 分 秒 格式化函数
        countDown() {
            let time=new Date();
            
            let times=new Date("2022/10/2");
            // console.log("time:" +time,times);
            // console.log(times-time);
            let seconds=(times-time)/1000;
            console.log(seconds);
            let d = parseInt(seconds / (24 * 60 * 60))
            d = d < 10 ? "0" + d : d
            let h = parseInt(seconds / (60 * 60) % 24);
            h = h < 10 ? "0" + h : h
            let m = parseInt(seconds / 60 % 60);
            m = m < 10 ? "0" + m : m
            let s = parseInt(seconds % 60);
            s = s < 10 ? "0" + s : s
            // this.count = d + '天' + h + '时' + m + '分' + s + '秒'
            this.day= d + "天";
            this.shi=h;
            this.fen=m;
            this.miao=s;
        },
        //定时器没过1秒参数减1
        Time() {
            setInterval(() => {
                this.seconds -= 1
                this.countDown()
            }, 1000)
        },
    }
}
</script>

<style scoped>
.time-box{
    width:100%;
    /* height: ; */
    background-color:white;
    /* margin-top: 1.25rem; */
    padding-top: 10px;
}
.hot{
    color: red;
    font-size: .75rem;
}
.kill-box{
    width: 100%;
    height: 10rem;
    background-color: white;
    margin-top: .375rem;
    border-radius: .625rem;
}
.red{
    font-size: .875rem;
    color: red;
}
.big{
    color: red;
    font-size: 1.125rem;
    /* size: 700; */
    margin-right: 5.625rem;
}
.box{
    background-color: red;
    color: white;
    border-radius: .375rem;
    font-size: .875rem;
}
.bottom-box{
    /* border: 1px solid black; */
    margin-top: 1.25rem;
    width: 100%;
    height: 6.875rem;
}
.bottom-box img{
  width: 3.75rem;
  height: 3.75rem;
}
.bottom-box ul{
    display: flex;
    flex-wrap: nowrap;
    overflow:auto;
}
.bottom-box ul li{
   margin-left: .25rem;
}
.bottom-box .price{
  color: red;
  font-size: .75rem;
}
</style>